<template>
    <div>
        <Form :label-width="80" inline>
            <FormItem label="创建人">
                <Input @on-clear="getAllAnnouncement" v-model="map.name" clearable class="myform"/>
            </FormItem>
            <FormItem label="标题">
                <Input @on-clear="getAllAnnouncement" v-model="map.title" clearable class="myform"/>
                <Button icon="ios-search" type="success" @click="getAllAnnouncement" class="btn">查询</Button>
                <Button class="btn" icon="md-add-circle" @click="modal.addAnnouncementFlag = true" type="info">添加公告
                </Button>
            </FormItem>
        </Form>
        <Table :loading="loading" :columns="announcementcolumns" :data="announcementData">
            <template slot-scope="{ row, index }" slot="action">
                <Button :disabled="row.issue" type="primary" icon="ios-build" size="small" class="myten" @click="">编辑
                </Button>
                <Poptip confirm
                        transfer
                        title="确认发布?"
                        @on-ok="putOutAnnouncement(row)"
                        @on-cancel="$Message.info('已取消')">
                    <Button :disabled="row.issue" type="warning" :icon="!row.issue?'ios-hand':'md-done-all'" size="small"
                            class="myten"> {{row.issue?'已发布':'发布'}}
                    </Button>
                </Poptip>
                <Poptip word-wrap transfer placement="right" width="1000">
                    <Button type="info" icon="ios-eye-outline" size="small" class="myten" @click="">详情</Button>
                    <div class="api" slot="content">
                        <div class="myandiv" v-html="row.content"></div>
                    </div>
                </Poptip>
                <Poptip confirm
                        transfer
                        title="是否删除?"
                        @on-ok="remove(row,index)"
                        @on-cancel="$Message.info('已取消')">
                    <Button type="error" icon="md-trash" size="small">删除</Button>
                </Poptip>
            </template>
        </Table>
        <br/>
        <Page :total="total" :page-size="map.size" @on-change="changePage" @on-page-size-change="changePageSize"
              show-sizer show-total show-elevator transfer/>
        <add-announcement :modal="modal"/>
    </div>
</template>
<script>
    import addAnnouncement from "@c/system/addAnnouncement";

    export default {
        components: {addAnnouncement},
        data() {
            return {
                modal: {
                    addAnnouncementFlag: false
                },
                loading: false,
                announcementData: [],
                map: {
                    page: 1,
                    size: 10,
                    name: null,
                    title: null
                },
                total: 0,
                announcementcolumns: [
                    {
                        type: 'index',
                        width: 70,
                        title: '序号',
                        align: 'center'
                    },
                    {
                        title: "头像",
                        align: 'center',
                        width: 70,
                        render: (h, params) => {
                            return params.row.userDO.avatarUrl != null ?
                                <Avatar shape="square" icon="ios-person" src={params.row.userDO.avatarUrl}></Avatar> :
                                <Avatar shape="square">{params.row.userDO.name.charAt(0)}</Avatar>

                        }
                    },
                    {
                        title: "创建人",
                        sortable: true,
                        align: 'center',
                        width: 120,
                        render: (h, params) => {
                            return <label>{params.row.userDO.name}</label>
                        }
                    },
                    {
                        title: "标题",
                        sortable: true,
                        width: 200,
                        key: "title"
                    },
                    {
                        title: "内容",
                        ellipsis: true,
                        sortable: true,
                        render: (f, param) => {
                            return param.row.content.length < 200 ?
                                <div>{param.row.content.replace(/<[^>]+>/g, "")}</div> :
                                <div>{param.row.content.replace(/<[^>]+>/g, "").substring(0, 200)}</div>
                        }
                    },
                    {
                        title: "创建时间",
                        sortable: true,
                        width: 120,
                        align: 'center',
                        render: (h, params) => {
                            return <span>{new Date(params.row.createTime).toLocaleDateString()}</span>
                        }
                    },
                    {
                        title: "修改时间",
                        sortable: true,
                        width: 120,
                        align: 'center',
                        render: (h, params) => {
                            return <span>{new Date(params.row.updateTime).toLocaleDateString()}</span>
                        }
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 350,
                        align: 'center'
                    }
                ]
            }
        },
        methods: {
            changePage(val) {
                this.map.page = val
                this.getAllAnnouncement();
            },
            changePageSize(val) {
                this.map.size = val
                if (this.map.page == 1) {
                    this.getAllAnnouncement();
                }
            },
            /**
             * 获取全部数据
             */
            getAllAnnouncement() {
                this.loading = true
                this.http.post("/announcement/getAllAnnouncement", this.qs.parse(this.map)).then(res => {
                    if (res.data) {
                        this.announcementData = res.data.list
                        this.total = res.data.total
                    }
                }).finally(f => {
                    this.loading = false
                })
            },
            /**
             * 发布公告
             * @param row
             */
            putOutAnnouncement(row) {
                this.MySocket.commit("sendusermsg", JSON.stringify(row))
                row.issue = true
                this.$Message.success({
                    background: true,
                    content: "成功发布公告"
                })
            }
        },
        mounted() {
            this.getAllAnnouncement()
        }
    }
</script>
<style lang="less">
    .myten {
        margin-right: 5px
    }

    .myandiv {
        padding: 10px;
        max-height: 900px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .myform {
        width: 300px;
    }

    .btn {
        margin-left: 10px;
    }
</style>
